<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>定制活动</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .el-descriptions-item__label {
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak class="minWidth">
        <yl-page-header content="新增定制活动"></yl-page-header>
        <el-form :model="form" :rules="rules" ref="contract" inline-message="true" style="width: 100%;">
            <div class="table_titel">
                <div class="titel">定制活动</div>
            </div>
            <el-descriptions :column="1" border size="small">
                <el-descriptions-item label="活动时间">
                    <el-form-item prop="Date">
                        <!-- <el-date-picker v-model.trim="form.Start_Date" type="datetime" placeholder="请选择开始时间"
                            value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> -->
                        <el-date-picker prefix-icon="el-icon-date" v-model="form.Date" clearable type="datetimerange"
                            value-format="yyyy-MM-dd HH:mm:ss"  :default-time="['00:00:00', '23:59:59']" format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                </el-descriptions-item>
                <!-- <el-descriptions-item label="结束时间">
                    <el-form-item prop="End_Date">
                        <el-date-picker v-model.trim="form.End_Date" type="datetime" placeholder="请选择开始时间"
                            value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    </el-form-item>
                </el-descriptions-item> -->
                <el-descriptions-item label="活动名称">
                    <el-form-item prop="Activity_Name">
                        <el-input v-model.trim="form.Activity_Name" placeholder="请输入活动名称"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="活动公告">
                    <el-form-item prop="Activity_Notice">
                        <el-input v-model.trim="form.Activity_Notice" placeholder="请输入活动公告"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="活动备注">
                    <el-form-item prop="Activity_Notes">
                        <el-input v-model.trim="form.Activity_Notes" placeholder="请输入活动备注"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="活动页面">
                    <el-form-item prop="Page_SerialNumber">
                        <div style="display: flex;">
                            <el-button @click="drawer = true" type="success">预览</el-button>
                            <el-select style="width: 100%;" v-model="form.Page_SerialNumber" clearable placeholder="请选择活动页面">
                                <el-option v-for="item in page" :key="item.Page_SerialNumber" :label="item.Page_Name" :value="item.Page_SerialNumber"></el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="活动图片">
                    <el-form-item prop="Picture_URL">
                        <yl-upload v-model.trim="form.Picture_URL" :base="BASE_IMG"></yl-upload>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>
            <div class="table_titel">
                <div class="titel">参与会员</div>
            </div>
            <el-descriptions :column="1" border size="small" style="margin-bottom: 10px;">
                <el-descriptions-item label="参与小区">
                    <el-form-item prop="End_Date">
                        <!-- <el-cascader v-model="business_department_info" placeholder="请选择参与小区" filterable
                            :props="defaultProps" :options="department" style="width: 100%"></el-cascader> -->
                        <el-select style="width: 100%;" multiple v-model="business_department_info" clearable placeholder="请选择参与小区">
                            <el-option v-for="item in department" :key="item.Department_SerialNumber" :label="item.Department_Name" :value="item.Department_SerialNumber"></el-option>
                        </el-select>    
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>
            <!-- 选择部门获取会员 -->
            <!-- 导入 -->
            <!-- <yl-table :data="tableData" :num="3">
                <el-table-column prop="Member_SerialNumber" align="center" label="手机号"></el-table-column>
                <el-table-column prop="Member_Name" align="center" label="用户名"></el-table-column>
            </yl-table> -->
            <div class="table_titel">
                <div class="titel">活动商品</div>
                <div class="operation">
                    <el-button @click="dialogVisible = true" type="primary" size="small">选择商品</el-button>
                </div>
            </div>
            <!-- <el-descriptions :column="2" border size="small">
                <el-descriptions-item label="品牌筛选">
                    <el-form-item prop="Brand_SerialNumber">
                        <el-select v-model.trim="selectBrand" multiple style="width: 100%;" placeholder="请选择品牌">
                            <el-option v-for="item in brand" :key="item.Brand_SerialNumber" :label="item.Brand_Name"
                                :value="item.Brand_SerialNumber"></el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions> -->
            <yl-table :data="article_specifications" :num="1"  @remove="handleRemove">
                <el-table-column prop="Supplier_Article_SerialNumber" align="center" label="商品流水号"></el-table-column>
                <el-table-column prop="Article_Name" align="center" label="商品名称"></el-table-column>
                <el-table-column prop="Specifications_Name" align="center" label="商品规格"></el-table-column>
                <el-table-column prop="Picture_URL" align="center" width="140" label="商品图片">
                    <template v-slot="{row}">
                        <el-image fit="contain" :preview-src-list="[BASE_IMG + row.Picture_URL]" :src="BASE_IMG + row.Picture_URL"
                            style="width:100px;height: 100px;"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="Supplier_Name" align="center" label="供应商"></el-table-column>
                <el-table-column prop="Purchase_Unit_Price" align="center" label="采购价格"></el-table-column>
                <el-table-column prop="Activity_Unit_Price" align="center" width="220" label="活动价格">
                    <template v-slot="{row}">
                        <el-input-number v-model="row.Activity_Unit_Price" :min="1" ></el-input-number>
                    </template>
                </el-table-column>
            </yl-table>
            <div style="height: 90px;"></div>
            <el-form-item class="form-operation">
                <el-button @click="window.history.back()">返回</el-button>
                <el-button type="primary" :loading="loading" @click="submitForm('contract')">提交</el-button>
            </el-form-item>
        </el-form>
        <el-drawer title="预览" :size="450" :visible.sync="drawer" direction="ltr"> 
            <div style="margin:0 20px; display: flex; align-items: center; flex-direction: column;">
                <el-select style="width: 100%; margin-bottom: 10px;" v-model="form.Page_SerialNumber" clearable placeholder="请选择活动页面">
                    <el-option v-for="item in page" :key="item.Page_SerialNumber" :label="item.Page_Name" :value="item.Page_SerialNumber"></el-option>
                </el-select>
                <mobile :base="BASE_URL4" :query="{Open_ID:'oC5yg5fCqG02aJ6CEShpHbXUXlys'}" :value="form.Page_SerialNumber?'/'+form.Page_SerialNumber+'.html':''"></mobile>
            </div>
        </el-drawer>
        <yl-goods :data="article_specifications" :visible.sync="dialogVisible" @success="getArticle"></yl-goods>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../index.js"></script>
    <script type="text/javascript" src="js/add.js"></script>
</body>

</html>